<template>
    <div>
        <div class="icon-box">
            <router-link to='/my'>
            <div>
            <van-icon name="arrow-left" size="30"/>
            </div>
            <div>收藏夹</div>
            </router-link>
        </div>
        <ul>
        <li class="fav-box" v-for="(list, index) in listData" :key="list.id">
            <div class="fav-img">
                <img :src="list.img">
            </div>
            <div class="fav-inf">
                <div class="fav-inf1">{{list.introduce}}</div>
                <div class="fav-inf2">
                    {{list.salesVolume}}
                </div>
                <div class="fav-inf3">
                    {{list.originalPrice}}
                </div>
                <div class="fav-inf4">
                    <van-icon name="cross"  @click="remove(index)"/>
                </div>
            </div>
        </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "Fav",
    data() {
        return {
            listData: []
        }
    },
    // 接收本地JSON文件
    created() {
        this.axios.get('data/mall.json').then(res => {
            this.listData = res.data;
        })
    },
    // 设置删除按钮的删除事件
    methods: {
        remove(index) {
            this.listData.splice(index,1)
        }
    }
}
</script>

<style scoped>
    ul {
        margin-top: 50px;
        background-color: #ffffff;
    }
    .icon-box {
        background-color: #ffffff;
        width: 100%;
        padding: 10px;
        padding-bottom: 0;
        height: 40px;
        position: fixed;
        top: 0;
        z-index: 99;
    }
    .icon-box a {
        color: #000000;
        height: 34px;
        line-height: 34px;
        display: flex;
    }
    .icon-box a div {
        line-height: 34px;
    }
    .fav-box {
        display: flex;
        margin: 10px;
    }
    .fav-img {
        height: 40vw;
        width: 40vw;
        overflow: hidden;
        border-radius: 10px;
    }
    .fav-img img {
        height: 40vw;
        width: 40vw;
    }
    .fav-inf {
        height: 150px;
        width: 50%;
        margin-left: 10px;
    }
    .fav-inf1 {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 42px;
        line-height: 21px;
    }
    .fav-inf2 {
        color: #999999;
        font-size: 15px;
        margin: 5px 0 ;
    }
    .fav-inf3 {
        font-size: 20px;
        color: #ff0000;
    }
    .fav-inf4 {
        margin-top: 35px;
        float: right;
    }
</style>